大前端

2.1.1 React + antd

1.install

在开始之前，你可能需要安装 yarn。

$ yarn create react-app antd-demo

如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd antd-demo
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
1
2
3
4
5
6
7
8
9
10
11
12
  • 安装时候 issue：
1317/1318 Missing dependencies in package.json
error Command failed.
Exit code: 1

# 于是更新 Node.js 版本，原 Node.js 版本 10.8.0, 之后更新至 10.15.3
重新安装可以了
1
2
3
4
5
6
  • 启动
 cd antd-demo
 yarn start

之后打开浏览器 http://localhost:3000/
1
2
3
4

1.1 引入 antd

  • 安装 antd
yarn add antd
1
2
  • 1.修改 src/App.js，引入 antd 的按钮组件。
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 2.引入样式：


修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}
1
2
3
4
5
6
7
8
9

到这里 React + antd 一个基础项目搭建好了

2.路由

2.1 install

React Router 已被拆分成三个包： react-router,react-router-dom 和 react-router-native。
不需要直接安装 react-router，react-router 包提供核心的路由组件与函数。
其余两个提供运行环境（浏览器与react-native）所需的特定组件，
但是他们都暴露出 react-router 中暴露的对象与方法
我们进行的是网站（将会运行在浏览器）构建，所以应安装 react-router-dom。

yarn add react-router-dom
1

存在<BrowserRouter>与<HashRouter>两种组件。
当存在服务器管理动态请求时，需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站

2.2使用

// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";
1
2
3
  • basic router
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}

export default AppRouter;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  • Nested Routing
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Header() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  • 各个参数解析

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>
1
2
3
4
5
6
7
8
9
  • basename: 如果你的文件放在服务器的二级目录下则可以使用它,
    • 当你的主页前面是有一级目录 baseDirector 时: localhost:3000/baseDirector/
<HashRouter>
  basename: string
  getUserConfirmation: func
  hashType: string
  children: node
</HashRouter>
1
2
3
4
5
6
  • Link
<Link to="/courses?sort=name" />
1
  • obj
  
  Link to={{ pathname: "/courses", search: "?sort=name", hash: "#the-hash", state: { fromDashboard: true }}}
1
2
  • NavLink: 路由跳转标签 ,可以为当前选中的路由设置类名、样式以及回调函数
<!-- 
<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

activeStyle: object

The styles to apply to the element when it is active.
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>
<!--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • Route: 显示路由的窗口
<Route>
Route render methods
Route props
component
render: func
children: func
path: string | string[]
exact: bool
strict: bool
location: object
sensitive: bool
1
2
3
4
5
6
7
8
9
10
11

  • Switch: 作用是匹配的元素只显示第一个,用来保证路由窗口只显示一个路由标签 -常常会用来包裹Route，它里面不能放其他元素，用来只显示一个路由。

    <Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>
    1
    2
    3
    4
    5
    6

  • exact: 精确匹配路由

  • Redirect: 强制跳转 from 指定来自那个路由 to 跳转到那个路由

  • match: match是在使用router之后被放入props中的一个属性，

    • 在class创建的组件中我们需要通过this.props.match来获取match之中的信息

  • 添加 react-document-title

指定 document.title,也支持 SSR；

  • usage
npm install --save react-document-title

import DocumentTitle from 'react-document-title';


render() {
  // Update using value from state while this component is mounted
  return (
    <DocumentTitle title={this.state.title}>
      <div>
        <h1>New Article</h1>
        <input
          value={this.state.title}
          onChange={(e) => this.setState({ title: e.target.value })}
        />
      </div>
    </DocumentTitle>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.请求库：axios

yarn add axios
1

接下来安装 react-redux

参考

← 2.1.2 Redux 使用 →